import { FC } from "react";
import { Typography, Space, Spin } from "antd";
import QuestionCard from "../components/QuestionCard";
import TablePageConfig from "../components/TablePageConfig";
import useLoadQuestionList from "../hooks/useLoadQuestionList";
import SearchContainer from "../components/Search";
import style from "./pages.module.scss";
import classnames from "classnames/bind";
const CBN = classnames.bind(style);
const { Title } = Typography;
export type QuestionCardType = {
  _id: string;
  title: string;
  count: number;
  ispublished: boolean;
  start: boolean;
  deleted: boolean;
  createTime: string;
};
const StartPages: FC = () => {
  const { data, loading } = useLoadQuestionList({ start: true, trash: false })
  return (
    <div className={CBN("StartPages")}>
      <div className={CBN("top")}>
        <div className="left">
          <Title>星标问卷</Title>
        </div>
        <div className="right">
          <SearchContainer></SearchContainer>
        </div>
      </div>
      <div className={CBN("container")}>
        {loading ? <Spin></Spin> : <Space direction="vertical" style={{ width: "100%" }}>
          {data && data.list.map((item:QuestionCardType) => {
            return <QuestionCard key={item._id} {...item}></QuestionCard>;
          })}
        </Space>}
      </div>
      <div className={CBN("footer")} >
        <TablePageConfig total={54}></TablePageConfig>
      </div>
    </div>
  );
};

export default StartPages;
